/* =========================================================
   GUÍA COMPLETA PARA EXPLICAR EL CSS
   Esta guía explica las partes que aparecen en este archivo.

   ¿Qué es CSS?
   CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada).
   Sirve para darle diseño y presentación al HTML: colores, tamaños,
   espacios, posiciones, bordes, animaciones y adaptación a celulares.

   SELECTORES Y SÍMBOLOS
   selector        = indica qué elemento HTML vamos a modificar.
   .nombre         = selecciona un elemento que tenga esa clase.
   #nombre         = selecciona un elemento que tenga ese ID.
   elemento hijo   = por ejemplo .hero p selecciona los <p> que están dentro de .hero.
   :hover          = aplica estilos cuando el cursor pasa sobre el elemento.
   :focus          = aplica estilos cuando el elemento recibe el foco, por ejemplo con el teclado.
   :focus-within   = aplica estilos cuando un elemento o uno de sus hijos tiene el foco.
   ::after/::before = permiten crear contenido decorativo desde CSS cuando se usan.
   ,               = permite aplicar la misma regla a varios selectores.
   >               = indica un hijo directo.
   *               = selecciona todos los elementos.

   PROPIEDADES CSS USADAS EN ESTE ARCHIVO
   box-sizing      = indica cómo se calcula el ancho y alto de los elementos.
   scroll-behavior = hace que el desplazamiento de la página sea suave.
   margin          = crea espacio por fuera del elemento.
   margin-top      = espacio exterior superior.
   margin-right    = espacio exterior derecho.
   margin-bottom   = espacio exterior inferior.
   margin-left     = espacio exterior izquierdo.
   padding         = crea espacio por dentro del elemento.
   padding-top     = espacio interior superior.
   padding-right   = espacio interior derecho.
   padding-bottom  = espacio interior inferior.
   padding-left    = espacio interior izquierdo.
   width           = establece el ancho.
   min-width       = establece un ancho mínimo.
   max-width       = establece un ancho máximo.
   height          = establece el alto.
   min-height      = establece un alto mínimo.
   max-height      = establece un alto máximo.
   background      = establece el fondo del elemento.
   color           = cambia el color del texto.
   font            = permite definir varias características de la fuente de una vez.
   font-family     = indica el tipo de letra.
   font-size       = cambia el tamaño de la letra.
   font-weight     = cambia el grosor de la letra.
   font-style      = cambia el estilo de la letra, como normal o cursiva.
   line-height     = controla el espacio vertical entre líneas.
   letter-spacing  = controla la separación entre letras.
   text-align      = alinea el texto, por ejemplo a la izquierda, centro o justificado.
   text-decoration = agrega o quita decoraciones del texto, como el subrayado de enlaces.
   text-shadow     = agrega una sombra al texto.
   text-justify    = ayuda a controlar cómo se distribuye el texto cuando está justificado.
   display         = define cómo se comporta y organiza un elemento.
   flex            = permite controlar el tamaño y crecimiento de un elemento dentro de Flexbox.
   flex-direction  = indica si los elementos flexibles se organizan en fila o columna.
   flex-wrap       = permite que los elementos bajen a otra línea cuando no caben.
   flex-shrink     = indica cuánto puede reducirse un elemento flex dentro de su contenedor.
   align-items     = alinea elementos dentro de Flexbox o Grid en el eje correspondiente.
   align-content   = distribuye varias filas o líneas dentro de un contenedor.
   justify-content = distribuye elementos en Flexbox o Grid.
   place-items     = alinea los elementos en ambos ejes de forma abreviada.
   gap             = crea espacio entre elementos de Flexbox o Grid.
   grid-template-columns = define cuántas columnas tiene una cuadrícula y su tamaño.
   grid-column     = indica qué columnas ocupa un elemento dentro de Grid.
   position        = define cómo se posiciona un elemento: static, relative, absolute o fixed.
   top             = distancia desde la parte superior cuando position lo permite.
   right           = distancia desde el lado derecho cuando position lo permite.
   bottom          = distancia desde la parte inferior cuando position lo permite.
   left            = distancia desde el lado izquierdo cuando position lo permite.
   z-index         = controla qué elemento aparece por encima de otro.
   overflow        = controla qué pasa con contenido que se sale de su caja.
   overflow-x      = controla el contenido que se sale horizontalmente.
   overflow-y      = controla el contenido que se sale verticalmente.
   white-space     = controla si el texto puede pasar a otra línea.
   border          = crea un borde alrededor del elemento.
   border-top      = crea o modifica el borde superior.
   border-right    = crea o modifica el borde derecho.
   border-bottom   = crea o modifica el borde inferior.
   border-left     = crea o modifica el borde izquierdo.
   border-color    = cambia el color del borde.
   border-radius   = redondea las esquinas.
   outline         = crea una línea exterior sin ocupar espacio dentro del elemento.
   outline-offset  = separa el outline del borde del elemento.
   outline-color   = cambia el color del outline.
   box-shadow      = agrega una sombra alrededor de una caja.
   object-fit      = controla cómo una imagen se adapta al ancho y alto asignados.
   cursor          = cambia la apariencia del cursor del mouse.
   opacity         = controla la transparencia de un elemento.
   visibility      = controla si un elemento es visible u oculto sin eliminar su espacio de la página.
   pointer-events  = controla si el elemento puede recibir acciones del mouse o puntero.
   transform       = permite mover, girar, escalar o deformar un elemento.
   transition      = hace que los cambios de estilo sean suaves durante un tiempo determinado.
   animation       = aplica una animación definida con @keyframes.
   order           = cambia el orden visual de un elemento dentro de Flexbox.

   UNIDADES Y VALORES FRECUENTES
   px              = píxeles; unidad fija para tamaños y espacios.
   %               = porcentaje relacionado con el tamaño del elemento padre.
   rem             = unidad relacionada con el tamaño de letra raíz del documento.
   em              = unidad relacionada con el tamaño de letra del elemento.
   vw              = porcentaje del ancho de la ventana del navegador.
   vh              = porcentaje del alto de la ventana del navegador.
   fr              = parte disponible del espacio en CSS Grid.
   auto            = permite que el navegador calcule el valor automáticamente.
   0               = elimina o deja sin espacio esa propiedad cuando corresponde.

   VARIABLES Y FUNCIONES
   :root           = contiene variables CSS que se pueden reutilizar en todo el documento.
   --nombre        = crea una variable CSS personalizada.
   var(--nombre)   = utiliza una variable CSS creada anteriormente.
   clamp()         = establece un valor mínimo, uno flexible y uno máximo.
   calc()          = permite realizar cálculos con medidas CSS.
   min()           = utiliza el menor valor entre varias opciones.
   max()           = utiliza el mayor valor entre varias opciones.
   rgba()          = define un color con transparencia.
   linear-gradient() = crea un degradado lineal.
   radial-gradient() = crea un degradado circular o radial.
   url()           = indica la dirección de una fuente externa, como una fuente o imagen.

   REGLAS ESPECIALES
   @import         = importa recursos externos, como las fuentes de Google usadas aquí.
   @media          = permite cambiar el diseño según el tamaño de pantalla.
   @keyframes      = define los pasos de una animación.
   !important      = da prioridad a una regla cuando existen otras reglas que podrían sobrescribirla.

   EJEMPLO PARA EXPLICAR EN LA EXPOSICIÓN
   .tarjeta {                  -> selecciona los elementos con clase tarjeta.
       background: white;      -> pone el fondo blanco.
       padding: 20px;          -> deja 20px de espacio por dentro.
       margin: 10px;           -> deja 10px de espacio por fuera.
       border-radius: 15px;    -> redondea las esquinas.
   }
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@500;700;800;900&display=swap');

:root {
    --m: 305px;
    --g: #00e676;
    --lime: #c6ff00;
    --y: #fff000;
    --blue: #00b8ff;
    --pink: #ff3ca6;
    --purple: #9b4dff;
    --dark: #063e27;
    --cream: #fbfff2;
    --text: #17382a
}

* {
    box-sizing: border-box;
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--text);
    font: 19px/1.8 Nunito, sans-serif
}

h1,
h2,
h3 {
    font-family: 'Baloo 2';
    line-height: 1.05
}

h2 {
    font-size: clamp(3.2rem, 5vw, 5.3rem);
    color: var(--dark);
    margin: 0 0 35px
}

a {
    text-decoration: none
}

.top {
    position: fixed;
    z-index: 1200;
    top: 0;
    left: 0;
    width: 100%;
    height: 68px;
    background: #fff;
    border-bottom: 3px solid var(--lime);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-shadow: 0 5px 20px #0002
}

.top b {
    color: var(--dark);
    font-size: 15px
}

.top nav {
    display: flex;
    gap: 8px
}

.top nav a {
    color: var(--dark);
    font-weight: 900;
    padding: 5px 12px;
    border-radius: 10px
}

.top nav a:hover {
    background: var(--lime)
}

.menu {
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 68px;
    bottom: 0;
    width: var(--m);
    overflow-y: auto;
    padding: 25px 16px;
    background: linear-gradient(180deg, #063e27, #00a957);
    box-shadow: 8px 0 30px #0003
}

.brand {
    color: #fff;
    padding: 8px 10px 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #ffffff40;
    font-family: 'Baloo 2';
    font-size: 22px
}

.brand small {
    display: block;
    font: 14px Nunito
}

.menu nav {
    display: grid;
    gap: 5px
}

.menu nav a {
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    padding: 11px 12px;
    border-radius: 13px
}

.menu nav a:hover {
    background: var(--lime);
    color: var(--dark);
    transform: translateX(5px)
}

main {
    width: calc(100% - var(--m));
    margin-left: var(--m);
    padding-top: 68px
}

section {
    padding: 105px clamp(35px, 6vw, 100px);
    scroll-margin-top: 75px;
    min-height: 55vh
}

section.alt {
    background: linear-gradient(135deg, #eaffd9, #e7fbff)
}

section>label {
    color: #009b52;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 15px
}

.hero {
    min-height: calc(100vh - 68px);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 55px;
    align-items: center;
    background: radial-gradient(circle at 15% 20%, #c6ff00 0 6%, transparent 7%), linear-gradient(135deg, #faffef, #e9fff7)
}

.badge {
    display: inline-block;
    background: var(--y);
    border: 3px solid var(--dark);
    border-radius: 50px;
    padding: 7px 18px;
    font-weight: 900;
    box-shadow: 5px 5px 0 var(--dark)
}

.hero h1 {
    font-size: clamp(4.5rem, 7.5vw, 8.5rem);
    color: var(--dark);
    text-shadow: 5px 5px 0 #c6ff00;
    margin: 25px 0
}

.hero h1 em {
    color: #00a955;
    font-style: normal
}

.hero p {
    font-size: 1.4rem;
    max-width: 800px
}

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.pills span {
    padding: 7px 14px;
    border: 2px solid var(--dark);
    border-radius: 50px;
    font-weight: 900;
    box-shadow: 3px 3px 0 var(--dark)
}

.pills span:nth-child(1) {
    background: #ff74ba
}

.pills span:nth-child(2) {
    background: #c6ff00
}

.pills span:nth-child(3) {
    background: #ff8a45
}

.pills span:nth-child(4) {
    background: #8fe8ff
}

.pills span:nth-child(5) {
    background: #c58cff
}

.heroimg img,
.activity img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    border-radius: 35px;
    border: 8px solid white;
    box-shadow: 0 25px 60px #00964b35
}

.question {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 35px;
    padding: 45px;
    background: #fff;
    border: 4px solid var(--g);
    border-radius: 28px;
    box-shadow: 12px 12px 0 var(--lime);
    max-width: 1250px
}

.question>b {
    width: 110px;
    height: 110px;
    display: grid;
    place-items: center;
    border-radius: 30px;
    background: var(--y);
    border: 4px solid var(--dark);
    font: 900 80px 'Baloo 2'
}

.question p {
    font-size: 1.4rem
}

.text {
    max-width: 1200px;
    padding: 42px;
    background: #fff;
    border-radius: 25px;
    border-left: 9px solid var(--g);
    box-shadow: 0 15px 35px #00000012
}

.grid2,
.grid3,
.results {
    display: grid;
    gap: 25px
}

.grid2 {
    grid-template-columns: repeat(2, 1fr)
}

.grid3 {
    grid-template-columns: repeat(3, 1fr)
}

article {
    padding: 32px;
    background: #fff;
    border-radius: 25px;
    box-shadow: 8px 10px 0 #bfffd6;
    border: 3px solid #d7f3e2
}

article i {
    font-style: normal;
    font-size: 50px
}

article h3 {
    font-size: 1.8rem;
    margin: 10px 0
}

.g {
    border-color: var(--g);
    box-shadow: 8px 10px 0 var(--lime)
}

.b {
    border-color: var(--blue);
    box-shadow: 8px 10px 0 #9deaff
}

.p {
    border-color: var(--pink);
    box-shadow: 8px 10px 0 #ffb5dd
}

.g>b,
.b>b,
.p>b {
    font: 900 55px 'Baloo 2'
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 35px
}

.stats div {
    padding: 25px;
    text-align: center;
    background: var(--dark);
    color: #fff;
    border-radius: 20px;
    border-bottom: 7px solid var(--lime)
}

.stats b,
.stats strong {
    display: block
}

.stats b {
    color: var(--lime);
    font-size: 13px
}

.stats strong {
    font-size: 20px
}

.activity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    padding: 35px;
    background: #fff;
    border-radius: 28px
}

.activity img {
    height: 350px
}

.games {
    background: var(--dark);
    color: #fff
}

.games h2,
.games>label {
    color: var(--lime)
}

.games .grid3 article:nth-child(1) {
    background: var(--g)
}

.games .grid3 article:nth-child(2) {
    background: var(--blue)
}

.games .grid3 article:nth-child(3) {
    background: var(--y)
}

.iframe {
    min-height: 210px;
    display: grid;
    place-items: center;
    border: 3px dashed #123;
    border-radius: 18px;
    background: #ffffff70;
    font-weight: 900;
    font-size: 14px
}

.number {
    display: flex;
    align-items: center;
    gap: 25px;
    width: max-content;
    padding: 25px 35px;
    background: var(--dark);
    color: #fff;
    border-radius: 25px;
    box-shadow: 8px 8px 0 var(--lime);
    margin-bottom: 35px
}

.number b {
    font: 900 90px 'Baloo 2';
    color: var(--lime);
    line-height: 1
}

.results {
    grid-template-columns: repeat(2, 1fr)
}

.results article img {
    width: 100%;
    height: 370px;
    object-fit: cover;
    border-radius: 18px
}

.num {
    font: 900 55px 'Baloo 2';
    color: var(--g)
}

footer {
    margin-left: var(--m);
    background: #03271a;
    color: #fff;
    text-align: center;
    padding: 65px;
    border-top: 7px solid var(--lime)
}

footer h3 {
    color: var(--lime);
    font-size: 30px
}

@media(max-width:1050px) {
    :root {
        --m: 260px
    }

    .hero {
        grid-template-columns: 1fr
    }

    .grid3 {
        grid-template-columns: 1fr 1fr
    }

    .stats {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:720px) {
    .top {
        height: 58px;
        padding: 0 12px
    }

    .top b {
        font-size: 10px
    }

    .top nav {
        display: none
    }

    .menu {
        top: 58px;
        width: 100%;
        height: 116px;
        bottom: auto;
        padding: 8px 10px;
        overflow-x: auto;
        overflow-y: hidden
    }

    .brand {
        display: none
    }

    .menu nav {
        display: flex;
        width: max-content
    }

    .menu nav a {
        white-space: nowrap;
        font-size: 12px;
        padding: 8px 10px;
        background: #ffffff18
    }

    main {
        width: 100%;
        margin-left: 0;
        padding-top: 174px
    }

    footer {
        margin-left: 0
    }

    .hero,
    section {
        padding: 70px 20px
    }

    .hero {
        text-align: center;
        grid-template-columns: 1fr
    }

    .hero h1 {
        font-size: clamp(3.7rem, 17vw, 6rem)
    }

    .hero p {
        font-size: 1.15rem
    }

    .pills {
        justify-content: center
    }

    .heroimg img {
        height: 330px
    }

    .question {
        grid-template-columns: 1fr;
        padding: 28px
    }

    .question>b {
        margin: auto
    }

    .grid2,
    .grid3,
    .results,
    .activity {
        grid-template-columns: 1fr
    }

    .stats {
        grid-template-columns: 1fr 1fr
    }

    .results article img {
        height: 290px
    }

    h2 {
        font-size: 3.3rem
    }
}
/* AJUSTES FIGURAS */
section p,.text,.question p,article p,.justificacion-text{text-align:justify;}
.hero h1{font-size:clamp(3rem,5vw,5.2rem);text-align:justify;line-height:1.05;}
.heroimg img{height:620px;object-fit:contain;background:#fff;border:7px solid var(--g);animation:moverImagen 5s ease-in-out infinite;}
@keyframes moverImagen{0%,100%{transform:translateX(-8px) rotate(-.5deg)}50%{transform:translateX(8px) rotate(.5deg)}}
.video-inicio{grid-column:1/-1;max-width:1000px;width:100%;margin:10px auto;text-align:center}.video-title{display:inline-block;padding:8px 18px;background:var(--y);border:3px solid var(--dark);border-radius:30px;font-weight:900}.video-frame{min-height:280px;border:6px solid var(--g);border-radius:25px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:8px 8px 0 var(--lime)}
.section-image img,.center-images img,.center-single-image img,.text-image-row img,.justificacion-layout img,.game-link img{border:6px solid var(--g);outline:4px solid var(--y);outline-offset:4px;background:#fff;box-shadow:0 12px 30px #063e2730}
.justificacion-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:35px;align-items:center}.tall-image img{height:650px!important;object-fit:contain!important}
.text-image-row{width:100%;display:flex;justify-content:center;margin-top:40px}.medium-image{width:min(100%,700px)}.medium-image img{width:100%;height:390px;object-fit:contain;border-radius:22px;animation:moverImagen 5.5s ease-in-out infinite}
.center-images{width:100%;display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:55px;margin:55px auto 10px}.moving-image{width:min(45%,560px);text-align:center;animation:moverSuave 5s ease-in-out infinite}.moving-image.delay{animation-delay:1.3s}.moving-image img{width:100%;height:390px;object-fit:contain;border-radius:24px}.moving-image p{margin-top:18px;font-size:16px}@keyframes moverSuave{0%,100%{transform:translateX(-10px)}50%{transform:translateX(10px)}}
.center-single-image{display:flex;justify-content:center;margin:45px auto 0}.center-single-image img{width:min(100%,850px);height:470px;object-fit:contain;border-radius:25px;animation:moverSuave 5s ease-in-out infinite}
.clickable-game{cursor:pointer;transition:transform .2s ease}.clickable-game:hover{transform:translateY(-8px)}.game-link{display:block;margin:15px 0 25px}.game-link img{display:block;width:100%;height:230px;object-fit:contain;border-radius:20px}.iframe{display:none}
.results-improved{display:grid;grid-template-columns:1fr 1fr;gap:35px}.results-improved article{display:flex;flex-direction:column}.results-improved article img{width:100%;height:470px;object-fit:contain;background:#fff;border:6px solid var(--g);outline:4px solid var(--y);outline-offset:4px;border-radius:22px;margin:0 auto 25px}.results-improved article p{text-align:justify}
#discusion h2{display:inline-flex;align-items:center;gap:20px}.title-image{width:85px;height:85px;object-fit:contain;border:5px solid var(--g);outline:3px solid var(--y);outline-offset:3px;border-radius:18px;animation:moverSuave 4s ease-in-out infinite}
@media(max-width:1050px){.hero{grid-template-columns:1fr}.justificacion-layout{grid-template-columns:1fr}.tall-image img{height:430px!important}.moving-image{width:80%}}
@media(max-width:720px){.hero h1{text-align:center}.heroimg img{height:380px}.moving-image{width:100%}.moving-image img{height:320px}.results-improved{grid-template-columns:1fr}.results-improved article img{height:330px}.title-image{width:65px;height:65px}}


/* =========================================================
   DISEÑO FINAL – AJUSTES SOLICITADOS
   ========================================================= */

/* Texto siempre justificado */
section p,
.text,
.question p,
.question,
article p,
.activity,
.activity p {
    text-align: justify;
}

/* Todos los bloques de texto/tarjetas se levantan al señalar */
.text,
.question,
article,
.activity,
.stats div,
.number,
.hypothesis,
.references,
.game-card,
.method-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.text:hover,
.question:hover,
article:hover,
.activity:hover,
.stats div:hover,
.number:hover,
.hypothesis:hover,
.references:hover,
.game-card:hover,
.method-card:hover {
    transform: translateY(-7px);
    border-color: #9aa0a6 !important;
    box-shadow: 0 15px 32px rgba(90,95,100,.22) !important;
}

/* Quitar barra verde del texto */
.text {
    border-left: none !important;
}

/* IMÁGENES: borde verde + amarillo y movimiento sutil */
.heroimg img,
.section-image img,
.activity img,
.center-images img,
.center-single-image img,
.side-content-image img,
.results-fixed img,
.title-image,
.game-link img {
    border: 6px solid var(--g) !important;
    outline: 4px solid var(--y);
    outline-offset: 3px;
    background: #fff;
    animation: imageFloat 5.5s ease-in-out infinite;
}

@keyframes imageFloat {
    0%,100% { transform: translateX(-8px); }
    50% { transform: translateX(8px); }
}

/* INICIO: título al lado de imagen, no justificado */
.hero {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    align-items: center;
}

.hero h1 {
    text-align: left !important;
    text-justify: auto !important;
    font-size: clamp(3.5rem,6vw,6.8rem) !important;
    margin: 20px 0;
}

.heroimg img {
    height: 650px !important;
    object-fit: contain !important;
}

/* VIDEO */
.video-inicio {
    grid-column: 1 / -1;
    width: min(100%,1050px);
    margin: 20px auto 0;
    text-align: center;
}
.video-title {
    display: inline-block;
    padding: 8px 18px;
    background: var(--y);
    color: var(--dark);
    border: 3px solid var(--dark);
    border-radius: 30px;
    font-weight: 900;
}
.video-frame {
    min-height: 300px;
    margin-top: 12px;
    background: white;
    border: 6px solid var(--g);
    border-radius: 25px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
}

/* PREGUNTA: imagen al lado */
.question-side-layout {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr);
    gap: 45px;
    align-items: center;
}
.question-side-layout .question {
    margin: 0;
    max-width: none;
}
.question-side-layout .side-image {
    margin: 0;
}
.question-side-layout .side-image img {
    width: 100%;
    height: 430px;
    object-fit: contain;
}

/* JUSTIFICACIÓN: imagen larga a un costado */
.justificacion-layout {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(300px,.6fr);
    gap: 40px;
    align-items: center;
}
.justificacion-layout .tall-image img {
    height: 680px !important;
    object-fit: contain !important;
}

/* RESUMEN Y ABSTRACT: imagen al lado */
.side-text-image {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
    gap: 40px;
    align-items: center;
}
.side-content-text .text {
    max-width: none;
}
.side-content-image {
    padding: 16px;
    background: white;
    border: 3px solid #d7dce0;
    border-radius: 25px;
}
.side-content-image img {
    width: 100%;
    height: 430px;
    object-fit: contain;
}

/* INTRODUCCIÓN: imágenes centradas, sin texto "Figura..." */
#introduccion .text {
    border-left: none !important;
}
#introduccion .center-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 55px;
    flex-wrap: wrap;
}
#introduccion .moving-image {
    width: min(45%,560px);
}
#introduccion .moving-image p {
    display: none !important;
}
#introduccion .moving-image img {
    width: 100%;
    height: 420px;
    object-fit: contain;
}

/* MARCO: imagen a la derecha */
.marco-side-layout {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr);
    gap: 40px;
    align-items: center;
}
.marco-side-layout .grid3 {
    grid-template-columns: 1fr !important;
}
.marco-side-layout .center-single-image {
    margin: 0;
}
.marco-side-layout .center-single-image img {
    width: 100%;
    height: 520px;
    object-fit: contain;
}

/* METODOLOGÍA: imágenes centradas y sin captions de las decorativas */
#metodologia .center-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 55px;
    flex-wrap: wrap;
}
#metodologia .moving-image {
    width: min(45%,560px);
}
#metodologia .moving-image p {
    display: none !important;
}
#metodologia .moving-image img {
    width: 100%;
    height: 420px;
    object-fit: contain;
}

/* RESULTADOS: cada texto arriba y su gráfica debajo */
.results-fixed {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 35px;
    align-items: start;
}
.results-fixed article {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.results-fixed article p {
    width: 100%;
    text-align: justify;
}
.results-fixed article img {
    width: 100%;
    height: 520px;
    object-fit: contain;
    padding: 12px;
    margin-top: 15px;
    background: white;
    border: 6px solid var(--g);
    outline: 4px solid var(--y);
    outline-offset: 3px;
    border-radius: 22px;
}

/* DISCUSIÓN: título más abajo + imagen AL LADO */
#discusion {
    padding-top: 125px;
}
.discussion-title {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}
.discussion-title h2 {
    margin: 0;
}
.discussion-title .title-image {
    width: 78px;
    height: 78px;
    object-fit: contain;
    flex: 0 0 auto;
}
#discusion .text {
    border-left: none !important;
}

/* Juegos: imagen clicable */
.game-link {
    display: block;
}
.game-link img {
    width: 100%;
    height: 230px;
    object-fit: contain;
    border-radius: 20px;
}

/* Responsive */
@media(max-width:1050px){
    .hero,
    .question-side-layout,
    .justificacion-layout,
    .side-text-image,
    .marco-side-layout {
        grid-template-columns: 1fr !important;
    }
    .hero h1 {
        text-align: center !important;
    }
    .marco-side-layout .grid3 {
        grid-template-columns: 1fr 1fr !important;
    }
    .results-fixed {
        grid-template-columns: 1fr !important;
    }
}
@media(max-width:720px){
    .marco-side-layout .grid3 {
        grid-template-columns: 1fr !important;
    }
    .heroimg img {
        height: 400px !important;
    }
    .discussion-title {
        justify-content: center;
    }
}

:root{--verde-prof:#2f6f5e;--verde-suave:#dceee7;--crema:#fbfaf4;--texto-prof:#263b35;--borde-prof:#d8e2de;--sombra-prof:0 12px 30px rgba(38,59,53,.10)}
body.pagina-natural{background:radial-gradient(circle at 10% 10%,rgba(220,238,231,.55),transparent 28%),radial-gradient(circle at 90% 20%,rgba(243,231,173,.28),transparent 24%),var(--crema)!important;color:var(--texto-prof)!important;font-family:"Nunito","Segoe UI",Arial,sans-serif}
h1{font-size:clamp(2.5rem,4vw,4.2rem)!important;line-height:1.08!important;letter-spacing:-.02em}
h2{font-size:clamp(2rem,3vw,3rem)!important;color:var(--verde-prof)!important}
h3,label,.section-label{color:var(--verde-prof)!important}
section{background:rgba(255,255,255,.72);border:1px solid var(--borde-prof);border-radius:28px;box-shadow:var(--sombra-prof);backdrop-filter:blur(4px)}
section p,.text,.text-box,.question-box,article{color:var(--texto-prof);line-height:1.75}
.card,.big-card,.hypothesis,.text-box,.question-box,.result-card,.game-card,article{border-color:var(--borde-prof)!important;box-shadow:0 8px 22px rgba(38,59,53,.07);transition:transform .22s,box-shadow .22s,border-color .22s}
.card:hover,.big-card:hover,.hypothesis:hover,.text-box:hover,.question-box:hover,.result-card:hover,.game-card:hover,article:hover{transform:translateY(-5px);border-color:#9aa9a3!important;box-shadow:0 15px 32px rgba(38,59,53,.14)}
.heroimg img,.hero img{min-height:560px;max-height:720px;object-fit:contain!important}
.section-image img,.center-single-image img,.moving-image img,.side-content-image img{min-height:420px;max-height:680px;object-fit:contain!important}
.results img,.results-improved img,article img{width:100%;min-height:480px;max-height:720px;object-fit:contain!important;background:#fff;padding:12px;border:2px solid #9bc8b8;border-radius:18px}
.video-frame{border:2px solid #a8cabe!important;box-shadow:var(--sombra-prof)!important;border-radius:22px!important;background:#fff!important;overflow:hidden}
.video-youtube{display:block;width:100%;height:520px;border:0}
html,body,body.pagina-natural,body.pagina-natural *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-25 16 16)'%3E%3Cellipse cx='16' cy='13' rx='7' ry='13' fill='%236b9b83' stroke='%232f6f5e' stroke-width='1.5'/%3E%3Cpath d='M16 2v22M16 14l-4-4M16 17l4-4' fill='none' stroke='%23eef7f3' stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E") 4 4,auto!important}
a,button,input,select,textarea,label[for]{cursor:pointer!important}
@keyframes balanceoNatural{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
.heroimg img,.moving-image img,.center-single-image img{animation:balanceoNatural 5s ease-in-out infinite}
@media(max-width:900px){h1{font-size:2.8rem!important}.heroimg img,.hero img{min-height:380px;max-height:520px}.section-image img,.center-single-image img,.moving-image img,.side-content-image img,.results img,.results-improved img,article img{min-height:300px;max-height:500px}.video-youtube{height:360px}}
@media(max-width:600px){h1{font-size:2.35rem!important}h2{font-size:2rem!important}.video-youtube{height:250px}}


/* =========================================================
   RESULTADOS — ESTRUCTURA ACADÉMICA Y ORDENADA
   ========================================================= */

#resultados {
    padding-bottom: 70px;
}

#resultados > h2 {
    margin-bottom: 18px;
}

#resultados .number {
    margin: 0 auto 45px;
}

.results-intro {
    max-width: 1100px;
    margin: 0 auto 55px;
}

.results-intro p {
    text-align: justify;
    font-size: 1.08rem;
    line-height: 1.85;
    margin-bottom: 22px;
}

.resultados-lista {
    width: min(1100px, 94%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.resultado-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    background: rgba(255,255,255,.9);
    border: 1px solid #d8e2de;
    border-radius: 26px;
    padding: 34px 38px 38px;
    box-shadow: 0 10px 28px rgba(38,59,53,.08);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.resultado-item:hover {
    transform: translateY(-5px);
    border-color: #9aa9a3;
    box-shadow: 0 17px 35px rgba(38,59,53,.14);
}

.resultado-texto {
    padding-bottom: 4px;
}

.resultado-texto p {
    margin: 0;
    text-align: justify;
    font-size: 1.06rem;
    line-height: 1.82;
}

.resultado-figura {
    width: 100%;
    text-align: center;
    border-top: 1px solid #e2e9e6;
    padding-top: 28px;
}

.figura-numero {
    margin: 0 0 5px;
    color: #2f6f5e;
    font-size: 1.05rem;
}

.figura-titulo {
    margin: 0 auto 24px;
    max-width: 900px;
    font-size: 1rem;
    line-height: 1.55;
    color: #40524c;
}

.resultado-figura img {
    display: block;
    width: min(100%, 900px);
    height: 560px;
    margin: 0 auto 24px;
    padding: 14px;
    object-fit: contain !important;
    background: #fff;
    border: 2px solid #a8cabe;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(38,59,53,.09);
}

.figura-nota {
    width: min(100%, 900px);
    margin: 0 auto;
    text-align: justify;
    font-size: .91rem;
    line-height: 1.65;
    color: #66736e;
}

@media (max-width: 700px) {
    .resultado-item {
        padding: 25px 20px 28px;
    }

    .resultado-figura img {
        height: 380px;
    }

    .results-intro p,
    .resultado-texto p {
        font-size: 1rem;
    }
}


/* ===== REDISEÑO CON PALETA DEL PÓSTER ===== */
:root{
    --poster-green:#4f8b78;
    --poster-green-dark:#2f6256;
    --poster-purple:#735a8f;
    --poster-blue:#5f87a8;
    --poster-lilac:#e8e0ef;
    --poster-mint:#e3f0eb;
    --poster-cream:#f8f7f2;
    --poster-text:#2e3b3a;
}

/* Fondo: imagen natural local */
body, body.pagina-natural{
    background:
      linear-gradient(rgba(248,247,242,.88),rgba(248,247,242,.88)),
      url("naturaleza-fondo.png") center/cover fixed no-repeat !important;
    color:var(--poster-text) !important;
}

/* Cuadros blancos para lectura */
section,.content-card,.text-box,.question-box,.card,.big-card,
.hypothesis,.resultado-item,.references,.activity-box,.game-card{
    background:rgba(255,255,255,.96) !important;
    border-color:rgba(79,139,120,.28) !important;
}

/* Título más pequeño y junto a la imagen */
.hero{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;
    align-items:center;
}
.hero h1{
    font-size:clamp(2rem,3.2vw,3.3rem)!important;
    text-align:left!important;
    max-width:560px;
}
.heroimg img{
    min-height:560px!important;
    max-height:720px!important;
    object-fit:contain!important;
}

/* Colores de títulos */
h2,h3,.section-label,label{color:var(--poster-green-dark)!important}

/* Imágenes grandes */
.section-image img,.center-single-image img,.moving-image img,
.side-content-image img{
    min-height:480px!important;
    max-height:720px!important;
    object-fit:contain!important;
}

/* Video */
.video-wrap{
    width:min(100%,1000px);
    margin:24px auto 0;
    border:3px solid var(--poster-green);
    border-radius:22px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 12px 30px rgba(47,98,86,.12);
}
.video-wrap iframe{
    display:block;
    width:100%;
    height:560px;
    border:0;
}

/* RESULTADOS: UNA SOLA COLUMNA */
#resultados .resultados-lista{
    display:flex!important;
    flex-direction:column!important;
    width:min(1100px,94%)!important;
    margin:0 auto!important;
    gap:42px!important;
}
#resultados .resultado-item{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    box-sizing:border-box;
    padding:36px 42px 42px!important;
}
#resultados .resultado-texto{order:1!important;width:100%!important}
#resultados .resultado-figura{order:2!important;width:100%!important}
#resultados .resultado-figura img{
    width:min(100%,900px)!important;
    height:580px!important;
    margin:0 auto 24px!important;
    object-fit:contain!important;
    background:#fff!important;
    border:3px solid var(--poster-green)!important;
    outline:4px solid var(--poster-lilac);
    outline-offset:3px;
}
#resultados .figura-numero{color:var(--poster-purple)!important}

/* Cursor hoja */
html,body,body *{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='14' rx='7' ry='12' fill='%234f8b78' transform='rotate(-25 16 14)'/%3E%3Cpath d='M16 3v22M16 15l-4-4M16 18l4-4' stroke='white' fill='none' stroke-width='1.3'/%3E%3C/svg%3E") 4 4,auto!important;
}

/* Chat perro */
.dog-chat{
    position:fixed;right:24px;bottom:24px;z-index:9999;
}
.dog-chat-button{
    width:68px;height:68px;border-radius:50%;border:3px solid var(--poster-green);
    background:#fff;font-size:34px;box-shadow:0 10px 25px rgba(47,98,86,.20);
}
.dog-chat-box{
    position:absolute;right:0;bottom:82px;width:320px;background:#fff;
    border:2px solid var(--poster-green);border-radius:22px;
    box-shadow:0 16px 35px rgba(47,98,86,.20);overflow:hidden;
}
.dog-chat-head{
    padding:14px 16px;background:var(--poster-green);color:#fff;font-weight:800;
}
.dog-chat-body{padding:18px;color:var(--poster-text);line-height:1.5}
.dog-questions{display:flex;flex-direction:column;gap:8px}
.dog-questions a{
    padding:9px 11px;background:var(--poster-mint);border-radius:12px;
    color:var(--poster-green-dark);text-decoration:none;font-weight:700;
}
.dog-questions a:hover{background:var(--poster-lilac)}
.dog-chat-body small{color:#69736f}

@media(max-width:800px){
    .hero{grid-template-columns:1fr!important}
    .hero h1{text-align:center!important;margin:auto}
    #resultados .resultado-item{padding:28px 20px 32px!important}
    #resultados .resultado-figura img{height:400px!important}
    .video-wrap iframe{height:320px}
}
@media(max-width:600px){
    .dog-chat{right:12px;bottom:12px}
    .dog-chat-box{width:min(320px,calc(100vw - 30px))}
}


/* =========================================================
   ACTUALIZACIÓN FINAL: ROSADOS + VERDES
   ========================================================= */

:root{
    --rosa-principal:#d97c9b;
    --rosa-oscuro:#a95373;
    --rosa-claro:#f7e3ea;
    --rosa-suave:#fff5f8;
    --verde-principal:#5b927d;
    --verde-oscuro:#386b59;
    --verde-claro:#e2f0e9;
    --blanco:#ffffff;
    --texto:#394640;
}

/* Paleta general */
body, body.pagina-natural{
    background:
        linear-gradient(rgba(255,245,248,.91),rgba(255,255,255,.91)),
        url("naturaleza-fondo.png") center/cover fixed no-repeat !important;
    color:var(--texto)!important;
}

/* Títulos */
h2,h3,.section-label,label{
    color:var(--verde-oscuro)!important;
}

h1{
    color:var(--rosa-oscuro)!important;
}

/* Bordes y tarjetas */
section,.content-card,.text-box,.question-box,.card,.big-card,
.hypothesis,.resultado-item,.references,.activity-box,.game-card{
    background:rgba(255,255,255,.97)!important;
    border-color:rgba(217,124,155,.28)!important;
}

.text-box:hover,.question-box:hover,.card:hover,.big-card:hover,
.hypothesis:hover,.resultado-item:hover,.game-card:hover{
    border-color:var(--verde-principal)!important;
    box-shadow:0 16px 32px rgba(91,146,125,.16)!important;
}

/* Inicio: título pequeño junto a imagen */
.hero{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;
}
.hero h1{
    font-size:clamp(1.85rem,2.8vw,3rem)!important;
    line-height:1.1!important;
    text-align:left!important;
    max-width:500px;
}

/* VIDEO visible y grande */
.video-section{
    padding-top:34px;
}
.video-description{
    text-align:justify;
    color:var(--texto);
}
.video-wrap{
    width:min(100%,1000px)!important;
    margin:24px auto 0!important;
    border:4px solid var(--rosa-principal)!important;
    outline:4px solid var(--verde-claro);
    outline-offset:3px;
    border-radius:24px!important;
    overflow:hidden;
    background:#fff;
}
.video-wrap iframe{
    display:block;
    width:100%!important;
    height:560px!important;
    border:0!important;
}

/* Juegos: imágenes más grandes */
#juegos .game-card img,
#juegos img,
.game-card img{
    width:100%!important;
    min-height:300px!important;
    max-height:430px!important;
    object-fit:contain!important;
    background:#fff!important;
    padding:12px!important;
    border:3px solid var(--rosa-principal)!important;
    border-radius:20px!important;
}
.game-card{
    border-top:5px solid var(--verde-principal)!important;
}

/* Resultados: una sola columna */
#resultados .resultados-lista{
    display:flex!important;
    flex-direction:column!important;
    width:min(1080px,94%)!important;
    margin:auto!important;
    gap:38px!important;
}
#resultados .resultado-item{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    padding:34px 40px 40px!important;
}
#resultados .resultado-texto{order:1!important;width:100%!important}
#resultados .resultado-figura{order:2!important;width:100%!important}
#resultados .resultado-figura img{
    width:min(100%,920px)!important;
    height:580px!important;
    object-fit:contain!important;
    border:3px solid var(--verde-principal)!important;
    outline:4px solid var(--rosa-claro)!important;
    outline-offset:3px;
    background:#fff!important;
}
#resultados .figura-numero{
    color:var(--rosa-oscuro)!important;
}

/* =========================================================
   MENÚ 2: INICIO + CONTACTO
   ========================================================= */
.menu-secundario{
    position:fixed;
    top:18px;
    right:24px;
    z-index:9000;
    display:flex;
    gap:8px;
    padding:8px;
    background:rgba(255,255,255,.94);
    border:2px solid var(--rosa-claro);
    border-radius:18px;
    box-shadow:0 8px 22px rgba(57,70,64,.10);
}
.menu-secundario a{
    color:var(--verde-oscuro);
    text-decoration:none;
    font-weight:800;
    padding:8px 14px;
    border-radius:12px;
}
.menu-secundario a:hover{
    background:var(--rosa-claro);
    color:var(--rosa-oscuro);
}

/* =========================================================
   CHAT DEL PERRITO: ABRIR AL HACER CLIC
   ========================================================= */
.dog-chat{
    position:fixed!important;
    right:24px!important;
    bottom:24px!important;
    z-index:9999!important;
}
.dog-chat-toggle{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.dog-chat-button{
    display:flex!important;
    align-items:center;
    justify-content:center;
    width:72px!important;
    height:72px!important;
    border-radius:50%!important;
    border:4px solid var(--verde-principal)!important;
    background:#fff!important;
    font-size:36px!important;
    box-shadow:0 10px 26px rgba(57,70,64,.20)!important;
    cursor:pointer!important;
    transition:transform .2s ease;
}
.dog-chat-button:hover{
    transform:translateY(-4px) scale(1.04);
}
.dog-chat-box{
    display:none!important;
    position:absolute!important;
    right:0!important;
    bottom:88px!important;
    width:330px!important;
    background:#fff!important;
    border:3px solid var(--rosa-principal)!important;
    border-radius:24px!important;
    box-shadow:0 18px 38px rgba(57,70,64,.20)!important;
    overflow:hidden!important;
}
.dog-chat-toggle:checked ~ .dog-chat-box{
    display:block!important;
}
.dog-chat-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 18px!important;
    background:var(--verde-principal)!important;
    color:#fff!important;
    font-weight:900;
}
.dog-chat-close{
    color:#fff!important;
    font-size:26px;
    cursor:pointer!important;
}
.dog-chat-body{
    padding:18px!important;
    color:var(--texto)!important;
}
.dog-questions{
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
}
.dog-questions a{
    background:var(--rosa-suave)!important;
    border:1px solid var(--rosa-claro)!important;
    color:var(--verde-oscuro)!important;
    border-radius:13px!important;
    padding:10px 12px!important;
    text-decoration:none!important;
    font-weight:700;
}
.dog-questions a:hover{
    background:var(--verde-claro)!important;
}
.dog-note{
    font-size:.82rem;
    color:#77817c;
}

/* Contacto */
.contact-section .content-card{
    border-top:5px solid var(--rosa-principal)!important;
}

/* Cursor hoja */
html,body,body *{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='14' rx='7' ry='12' fill='%235b927d' transform='rotate(-25 16 14)'/%3E%3Cpath d='M16 3v22M16 15l-4-4M16 18l4-4' stroke='%23fff' fill='none' stroke-width='1.3'/%3E%3C/svg%3E") 4 4,auto!important;
}

@media(max-width:800px){
    .hero{grid-template-columns:1fr!important}
    .hero h1{text-align:center!important}
    .video-wrap iframe{height:330px!important}
    #resultados .resultado-item{padding:26px 20px 30px!important}
    #resultados .resultado-figura img{height:410px!important}
}
@media(max-width:600px){
    .dog-chat{right:12px!important;bottom:12px!important}
    .dog-chat-box{width:min(330px,calc(100vw - 24px))!important}
}


/* =========================================================
   PALETA EXACTA ENVIADA POR LA USUARIA
   ========================================================= */
:root{
    --dark-green:#0A3323;
    --moss-green:#839958;
    --beige:#F7F4D5;
    --rosy-brown:#D3968C;
    --midnight-green:#105666;
}

/* Fondo y texto */
body, body.pagina-natural{
    background:
      linear-gradient(rgba(247,244,213,.90),rgba(247,244,213,.90)),
      url("naturaleza-fondo.png") center/cover fixed no-repeat !important;
    color:var(--dark-green)!important;
}

/* Menú lateral: exactamente en la gama enviada */
.menu{
    background:linear-gradient(180deg,var(--dark-green) 0%,var(--midnight-green) 100%)!important;
    color:#fff!important;
    border-right:4px solid var(--rosy-brown)!important;
}
.menu .brand{
    color:#fff!important;
}
.menu .brand small{
    color:var(--beige)!important;
}
.menu nav a{
    color:#fff!important;
    border-left:4px solid transparent;
    transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.menu nav a:hover{
    background:var(--moss-green)!important;
    color:var(--beige)!important;
    border-left-color:var(--rosy-brown)!important;
}
.menu nav a:first-child,
.menu nav a:last-child{
    background:rgba(131,153,88,.20);
}

/* Encabezado provisional: luego aquí se integrará el menú obligatorio del colegio */
.top{
    background:var(--dark-green)!important;
    color:#fff!important;
    border-bottom:4px solid var(--rosy-brown)!important;
}
.top b{
    color:var(--beige)!important;
}

/* Cuadros de contenido */
section,.content-card,.text-box,.question-box,.card,.big-card,
.hypothesis,.resultado-item,.references,.activity-box,.game-card{
    background:rgba(255,255,255,.97)!important;
    border-color:rgba(131,153,88,.45)!important;
}
section{
    box-shadow:0 10px 26px rgba(10,51,35,.10)!important;
}

/* Jerarquía de colores */
h1{
    color:var(--midnight-green)!important;
}
h2,h3,.section-label,label{
    color:var(--dark-green)!important;
}
.eyebrow,.figura-numero{
    color:var(--rosy-brown)!important;
}

/* Botones/enlaces destacados */
button{
    background:var(--moss-green)!important;
    color:#fff!important;
}
a{
    color:var(--midnight-green);
}

/* Juegos: usar los cinco tonos */
.game-card{
    border-top:5px solid var(--rosy-brown)!important;
}
.game-card img,
#juegos .game-card img,
#juegos img{
    border:3px solid var(--moss-green)!important;
    background:var(--beige)!important;
}
.game-card:hover{
    border-color:var(--rosy-brown)!important;
    box-shadow:0 16px 32px rgba(10,51,35,.15)!important;
}

/* Resultados */
#resultados .resultado-item{
    border-left:6px solid var(--moss-green)!important;
}
#resultados .resultado-figura img{
    border-color:var(--moss-green)!important;
    outline-color:var(--beige)!important;
}
#resultados .figura-numero{
    color:var(--rosy-brown)!important;
}

/* Video */
.video-wrap{
    border-color:var(--rosy-brown)!important;
    outline-color:var(--beige)!important;
}

/* Contacto */
.contact-section .content-card{
    border-top:5px solid var(--midnight-green)!important;
}

/* Chat perro */
.dog-chat-button{
    border-color:var(--rosy-brown)!important;
    background:var(--beige)!important;
}
.dog-chat-box{
    border-color:var(--moss-green)!important;
}
.dog-chat-head{
    background:var(--dark-green)!important;
}
.dog-questions a{
    background:var(--beige)!important;
    color:var(--dark-green)!important;
    border-color:rgba(131,153,88,.45)!important;
}
.dog-questions a:hover{
    background:var(--rosy-brown)!important;
    color:#fff!important;
}

/* Cursor hoja en verde oscuro */
html,body,body *{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='14' rx='7' ry='12' fill='%23839958' transform='rotate(-25 16 14)'/%3E%3Cpath d='M16 3v22M16 15l-4-4M16 18l4-4' stroke='%230A3323' fill='none' stroke-width='1.3'/%3E%3C/svg%3E") 4 4,auto!important;
}


/* =========================================================
   PALETA EXACTA DEL DISEÑO ENVIADO POR LA USUARIA
   ========================================================= */
:root {
    --dark-green: #0A3323;
    --moss-green: #839958;
    --beige: #F7F4D5;
    --rosy-brown: #D3968C;
    --midnight-green: #105666;
}

/* Fondo y texto general */
body,
body.pagina-natural {
    color: var(--dark-green) !important;
}

/* Menú lateral */
.sidebar,
.side-menu,
nav.sidebar,
.menu-lateral,
.menu-principal {
    background: var(--dark-green) !important;
}

.sidebar a,
.side-menu a,
.menu-lateral a,
.menu-principal a {
    color: var(--beige) !important;
}

.sidebar a:hover,
.side-menu a:hover,
.menu-lateral a:hover,
.menu-principal a:hover {
    background: var(--moss-green) !important;
    color: var(--dark-green) !important;
}

/* Cuadros de contenido */
section,
.content-card,
.text-box,
.question-box,
.card,
.big-card,
.hypothesis,
.references,
.activity-box,
.game-card,
.contact-section .content-card {
    border-color: var(--moss-green) !important;
}

/* HIPÓTESIS */
.hypothesis,
.hypothesis-card,
.hipotesis-card {
    border: 3px solid var(--rosy-brown) !important;
    box-shadow: 0 8px 20px rgba(10,51,35,.10) !important;
}

.hypothesis:hover,
.hypothesis-card:hover,
.hipotesis-card:hover {
    border-color: var(--midnight-green) !important;
}

/* JUEGOS */
.game-card,
.game-box,
.activity-box {
    border: 3px solid var(--moss-green) !important;
    box-shadow: 0 8px 20px rgba(10,51,35,.10) !important;
}

.game-card:hover,
.game-box:hover,
.activity-box:hover {
    border-color: var(--rosy-brown) !important;
}

.game-card img,
.game-box img,
.activity-box img,
#juegos img {
    border: 4px solid var(--midnight-green) !important;
    outline: 3px solid var(--beige);
    outline-offset: 2px;
}

/* GRÁFICAS Y FIGURAS */
.resultado-figura img,
#resultados img,
.results img,
.results-improved img,
figure img {
    border: 4px solid var(--moss-green) !important;
    outline: 4px solid var(--beige) !important;
    outline-offset: 3px;
    box-shadow: 0 10px 24px rgba(10,51,35,.12) !important;
}

/* Imágenes generales del proyecto */
.section-image img,
.center-single-image img,
.moving-image img,
.side-content-image img,
.heroimg img {
    border-color: var(--midnight-green) !important;
}

/* CONTACTO */
.contact-section,
#contacto,
.contact-section .content-card {
    border-color: var(--rosy-brown) !important;
}

.contact-section .content-card {
    border-top: 6px solid var(--rosy-brown) !important;
}

.contact-section h2,
#contacto h2 {
    color: var(--midnight-green) !important;
}

/* VIDEO */
.video-wrap {
    border-color: var(--midnight-green) !important;
    outline-color: var(--beige) !important;
}

/* Resultados */
#resultados .resultado-item {
    border-color: var(--moss-green) !important;
}

#resultados .figura-numero {
    color: var(--rosy-brown) !important;
}

/* Botón del perrito */
.dog-chat-button {
    border-color: var(--rosy-brown) !important;
}

.dog-chat-box {
    border-color: var(--moss-green) !important;
}

.dog-chat-head {
    background: var(--dark-green) !important;
}

.dog-questions a {
    background: var(--beige) !important;
    color: var(--midnight-green) !important;
    border-color: var(--moss-green) !important;
}

.dog-questions a:hover {
    background: var(--rosy-brown) !important;
    color: var(--dark-green) !important;
}

/* Menú secundario */
.menu-secundario {
    border-color: var(--moss-green) !important;
}

.menu-secundario a:hover {
    background: var(--rosy-brown) !important;
    color: var(--dark-green) !important;
}

/* Mantener tarjetas blancas para legibilidad */
section,
.content-card,
.text-box,
.question-box,
.card,
.big-card,
.hypothesis,
.references,
.activity-box,
.game-card,
.resultado-item {
    background: #ffffff !important;
}


/* ===== PALETA EXACTA ENVIADA ===== */
:root {
  --dark-green:#0A3323;
  --moss-green:#839958;
  --beige:#F7F4D5;
  --rosy-brown:#D3968C;
  --midnight-green:#105666;
}

/* Fondo rosy brown suave */
body, body.pagina-natural {
  background:
    linear-gradient(rgba(211,150,140,.74),rgba(211,150,140,.74)),
    url("naturaleza-fondo.png") center/cover fixed no-repeat !important;
  color:var(--dark-green)!important;
}

/* Tarjetas blancas */
section,.content-card,.text-box,.question-box,.card,.big-card,
.hypothesis,.references,.activity-box,.game-card,.resultado-item {
  background:#fff!important;
}

/* Título del proyecto */
.hero h1,.titulo-proyecto {
  color:var(--dark-green)!important;
  font-size:clamp(1.85rem,2.8vw,3rem)!important;
  text-align:left!important;
}

/* Títulos de secciones */
h2,h3,.section-label { color:var(--dark-green)!important; }

/* "FIGURA" en negro */
.figura-numero,.figura-titulo,figure figcaption,.figure-label,
[class*="figura"] { color:#000!important; }

/* Imágenes y gráficas: Dark Green + Moss Green */
.resultado-figura img,#resultados img,figure img,
.section-image img,.center-single-image img,.moving-image img,
.side-content-image img {
  border:4px solid var(--dark-green)!important;
  outline:4px solid var(--moss-green)!important;
  outline-offset:3px!important;
  box-shadow:0 10px 24px rgba(10,51,35,.18)!important;
  background:#fff!important;
}

/* Resultados: una sola columna */
#resultados .resultados-lista {
  display:flex!important;flex-direction:column!important;
  width:min(1100px,94%)!important;margin:auto!important;gap:40px!important;
}
#resultados .resultado-item {
  width:100%!important;box-sizing:border-box!important;
  border:3px solid var(--moss-green)!important;
}
#resultados .resultado-figura img {
  width:min(100%,920px)!important;height:580px!important;
  object-fit:contain!important;margin:0 auto 24px!important;
}

/* Hipótesis */
.hypothesis,.hypothesis-card,.hipotesis-card {
  border:4px solid var(--dark-green)!important;
  border-left:9px solid var(--moss-green)!important;
  border-right:9px solid var(--rosy-brown)!important;
  box-shadow:0 8px 20px rgba(10,51,35,.12)!important;
}
.hypothesis:nth-child(even),.hypothesis-card:nth-child(even),
.hipotesis-card:nth-child(even) {
  border-left-color:var(--midnight-green)!important;
  border-right-color:var(--moss-green)!important;
}

/* Juegos: tonos sobrios de la paleta */
#juegos .game-card,#juegos .game-box,#juegos .activity-box,
.game-card,.game-box,.activity-box {
  background:#fff!important;
  border:4px solid var(--dark-green)!important;
  border-top:7px solid var(--moss-green)!important;
  box-shadow:0 10px 24px rgba(10,51,35,.13)!important;
}
#juegos .game-card:hover,#juegos .game-box:hover,#juegos .activity-box:hover {
  border-color:var(--midnight-green)!important;
}
#juegos .game-card img,#juegos .game-box img,#juegos .activity-box img,#juegos img {
  border:4px solid var(--dark-green)!important;
  outline:3px solid var(--moss-green)!important;
  outline-offset:2px!important;
}

/* Contacto */
#contacto,.contact-section { background:transparent!important; }
#contacto .content-card,.contact-section .content-card {
  background:var(--beige)!important;
  border:4px solid var(--dark-green)!important;
  border-top:8px solid var(--rosy-brown)!important;
  border-bottom:8px solid var(--moss-green)!important;
}
#contacto h2,.contact-section h2 { color:var(--midnight-green)!important; }
#contacto p,.contact-section p { color:var(--dark-green)!important; }

/* Video debajo de Inicio, con detalles de cine */
.video-card {
  position:relative;overflow:hidden;
  border:4px solid var(--dark-green)!important;
  border-top:9px solid var(--rosy-brown)!important;
  border-bottom:9px solid var(--moss-green)!important;
}
.video-card h2 { color:var(--dark-green)!important; }
.video-wrap {
  width:min(100%,1000px)!important;margin:24px auto!important;
  border:5px solid var(--dark-green)!important;
  outline:4px solid var(--moss-green)!important;outline-offset:4px!important;
  border-radius:12px!important;overflow:hidden!important;background:#000!important;
}
.video-wrap iframe { display:block;width:100%!important;height:560px!important;border:0!important; }
.film-pins {
  display:flex;justify-content:space-around;gap:18px;
  padding:8px 18px;background:var(--dark-green);
  margin:-36px -42px 25px;
}
.film-pins.bottom { margin:25px -42px -36px; }
.film-pins span {
  width:22px;height:12px;border-radius:3px;background:var(--beige);
  box-shadow:0 0 0 2px var(--moss-green);
}

/* Menú lateral */
.sidebar,.side-menu,nav.sidebar,.menu-lateral,.menu-principal {
  background:var(--dark-green)!important;
}
.sidebar a,.side-menu a,.menu-lateral a,.menu-principal a {
  color:var(--beige)!important;
}
.sidebar a:hover,.side-menu a:hover,.menu-lateral a:hover,.menu-principal a:hover {
  background:var(--moss-green)!important;color:var(--dark-green)!important;
}

/* Chat */
.dog-chat-button { border-color:var(--dark-green)!important; }
.dog-chat-box { border-color:var(--moss-green)!important; }
.dog-chat-head { background:var(--dark-green)!important; }
.dog-questions a {
  background:var(--beige)!important;color:var(--midnight-green)!important;
  border-color:var(--moss-green)!important;
}
.dog-questions a:hover { background:var(--rosy-brown)!important;color:var(--dark-green)!important; }

@media(max-width:800px) {
  .video-wrap iframe { height:330px!important; }
  .film-pins { margin-left:-20px;margin-right:-20px; }
  .film-pins.bottom { margin-left:-20px;margin-right:-20px; }
}


/* =========================================================
   PALETA FINAL — ROSY BROWN + VERDES
   Sin video
   ========================================================= */
:root{
    --dark-green:#0A3323;
    --moss-green:#839958;
    --beige:#F7F4D5;
    --rosy-brown:#D3968C;
    --midnight-green:#105666;
}

/* Fondo general */
html,
body,
body.pagina-natural{
    background:var(--rosy-brown) !important;
    color:var(--dark-green) !important;
}

/* Encabezado */
.top{
    background:var(--dark-green) !important;
    border-bottom:4px solid var(--moss-green) !important;
}
.top b,
.top nav a{
    color:var(--beige) !important;
}

/* Menú lateral */
.menu{
    background:linear-gradient(180deg,var(--dark-green),var(--midnight-green)) !important;
    border-right:4px solid var(--moss-green) !important;
}
.menu nav a{
    color:var(--beige) !important;
}
.menu nav a:hover{
    background:var(--moss-green) !important;
    color:var(--dark-green) !important;
}

/* Secciones: se mantiene el fondo Rosy Brown */
section,
section.alt{
    background:var(--rosy-brown) !important;
    color:var(--dark-green) !important;
    border-color:rgba(10,51,35,.20) !important;
}

/* Título principal */
.hero h1{
    color:var(--beige) !important;
    text-shadow:4px 4px 0 var(--dark-green) !important;
}
.hero h1 em{
    color:var(--moss-green) !important;
}
.hero p{
    color:var(--dark-green) !important;
}

/* Títulos de todas las secciones */
h2,
h3,
.section-label,
label{
    color:var(--dark-green) !important;
}

/* Etiquetas pequeñas */
section > label{
    color:var(--midnight-green) !important;
}

/* Tarjetas generales */
article,
.text,
.question,
.text-box,
.question-box,
.content-card,
.card,
.big-card{
    background:var(--beige) !important;
    color:var(--dark-green) !important;
    border-color:var(--moss-green) !important;
}

article h3,
.text h3,
.question h3,
.card h3,
.big-card h3{
    color:var(--dark-green) !important;
}

article p,
.text p,
.question p,
.card p,
.big-card p{
    color:var(--dark-green) !important;
}

/* Pregunta problema */
.question{
    border:4px solid var(--moss-green) !important;
    box-shadow:10px 10px 0 var(--midnight-green) !important;
}
.question > b{
    background:var(--rosy-brown) !important;
    color:var(--dark-green) !important;
    border-color:var(--dark-green) !important;
}

/* =========================================================
   HIPÓTESIS — tonos de la nueva paleta
   ========================================================= */
#hipotesis article.g{
    background:var(--dark-green) !important;
    color:var(--beige) !important;
    border:4px solid var(--moss-green) !important;
}
#hipotesis article.b{
    background:var(--moss-green) !important;
    color:var(--dark-green) !important;
    border:4px solid var(--dark-green) !important;
}
#hipotesis article.p{
    background:var(--beige) !important;
    color:var(--dark-green) !important;
    border:4px solid var(--rosy-brown) !important;
}
#hipotesis article.g h3,
#hipotesis article.g p{
    color:var(--beige) !important;
}
#hipotesis article.b h3,
#hipotesis article.b p,
#hipotesis article.p h3,
#hipotesis article.p p{
    color:var(--dark-green) !important;
}
#hipotesis article > b{
    color:var(--rosy-brown) !important;
}

/* =========================================================
   JUEGOS — nueva paleta
   ========================================================= */
#juegos{
    background:var(--dark-green) !important;
    color:var(--beige) !important;
}
#juegos > label,
#juegos > h2{
    color:var(--beige) !important;
}
#juegos article{
    background:var(--beige) !important;
    color:var(--dark-green) !important;
    border:4px solid var(--moss-green) !important;
    box-shadow:9px 9px 0 var(--midnight-green) !important;
}
#juegos article h3,
#juegos article p{
    color:var(--dark-green) !important;
}
#juegos article i{
    color:var(--midnight-green) !important;
}
#juegos .game-link img,
#juegos img{
    border:5px solid var(--midnight-green) !important;
    outline:4px solid var(--rosy-brown) !important;
    outline-offset:3px;
    background:var(--beige) !important;
}

/* Imágenes */
.section-image img,
.center-images img,
.center-single-image img,
.text-image-row img,
.justificacion-layout img,
.game-link img{
    border-color:var(--moss-green) !important;
    outline-color:var(--rosy-brown) !important;
    background:var(--beige) !important;
}

/* Estadísticas / resultados */
.number,
.resultado-item,
.results-intro{
    background:var(--beige) !important;
    color:var(--dark-green) !important;
    border-color:var(--moss-green) !important;
}
.number b{
    color:var(--midnight-green) !important;
}

/* Botones */
button{
    background:var(--moss-green) !important;
    color:var(--dark-green) !important;
    border-color:var(--dark-green) !important;
}

/* Footer */
footer{
    background:var(--dark-green) !important;
    border-top:6px solid var(--rosy-brown) !important;
}
footer h3,
footer p,
footer a{
    color:var(--beige) !important;
}

/* Cursor de hoja en tono Moss Green */
html,body,body *{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='14' rx='7' ry='12' fill='%23839958' transform='rotate(-25 16 14)'/%3E%3Cpath d='M16 3v22M16 15l-4-4M16 18l4-4' stroke='%230A3323' fill='none' stroke-width='1.3'/%3E%3C/svg%3E") 4 4,auto !important;
}


/* =========================================================
   VERSIÓN FINAL — PALETA SUAVE NATURAL
   ========================================================= */
:root{
    --dark-green:#0A3323;
    --moss-green:#839958;
    --beige:#F7F4D5;
    --rosy-brown:#D3968C;
    --midnight-green:#105666;

    --rosy-light:rgba(211,150,140,.72);
    --rosy-border:#A9655C;

    --border-green:#6F8F76;
    --border-moss:#B8C99A;
    --border-beige:#FFFFFF;
}

/* Fondo rosado más claro y translúcido */
html,
body,
body.pagina-natural{
    background:var(--rosy-light) !important;
    color:var(--dark-green) !important;
}

main{
    background:transparent !important;
}

section,
section.alt{
    background:rgba(211,150,140,.48) !important;
    color:var(--dark-green) !important;
}

/* =========================================================
   HIPÓTESIS — SIN BORDES NEÓN
   ========================================================= */
#hipotesis .grid3 article{
    box-shadow:none !important;
    outline:none !important;
    transform:none !important;
}

#hipotesis .grid3 article.g{
    background:var(--dark-green) !important;
    border:3px solid var(--border-green) !important;
}

#hipotesis .grid3 article.b{
    background:var(--moss-green) !important;
    border:3px solid var(--border-moss) !important;
}

#hipotesis .grid3 article.p{
    background:var(--beige) !important;
    border:3px solid var(--border-beige) !important;
}

#hipotesis .grid3 article.g h3,
#hipotesis .grid3 article.g p{
    color:var(--beige) !important;
}

#hipotesis .grid3 article.b h3,
#hipotesis .grid3 article.b p,
#hipotesis .grid3 article.p h3,
#hipotesis .grid3 article.p p{
    color:var(--dark-green) !important;
}

#hipotesis .grid3 article > b{
    color:var(--rosy-brown) !important;
}

/* =========================================================
   TODAS LAS IMÁGENES — MISMO MARCO ROSADO OSCURO
   ========================================================= */
.heroimg img,
.hero img,
.section-image img,
.activity img,
.center-images img,
.center-single-image img,
.side-content-image img,
.results-fixed img,
.resultado-figura img,
#resultados img,
.results img,
.results-improved img,
.title-image,
.game-link img,
.justificacion-layout img,
.text-image-row img,
.marco-side-layout img,
figure img,
article img{
    border:6px solid var(--rosy-border) !important;
    outline:none !important;
    outline-offset:0 !important;
    box-shadow:0 8px 22px rgba(10,51,35,.16) !important;
    background:transparent !important;
    padding:0 !important;
}

/* =========================================================
   METODOLOGÍA — IMÁGENES MÁS GRANDES Y CENTRADAS
   ========================================================= */
#metodologia .activity{
    width:min(100%,1050px) !important;
    margin:28px auto 42px !important;
    padding:10px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

#metodologia .activity img{
    display:block !important;
    width:min(100%,900px) !important;
    height:auto !important;
    max-height:650px !important;
    object-fit:contain !important;
    margin:0 auto !important;
}

/* =========================================================
   MARCO REFERENCIAL — IMAGEN MÁS GRANDE
   ========================================================= */
.marco-side-layout .center-single-image{
    width:100% !important;
    margin:0 auto !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}

.marco-side-layout .center-single-image img{
    width:min(100%,950px) !important;
    height:600px !important;
    max-height:none !important;
    object-fit:contain !important;
    margin:0 auto !important;
}

/* =========================================================
   JUSTIFICACIÓN — IMAGEN MÁS LARGA
   ========================================================= */
.justificacion-layout{
    grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr) !important;
    gap:40px !important;
    align-items:center !important;
}

.justificacion-layout .tall-image{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}

.justificacion-layout .tall-image img{
    width:100% !important;
    height:760px !important;
    max-height:none !important;
    object-fit:cover !important;
    margin:0 auto !important;
}

/* =========================================================
   JUEGOS — SIN BORDES AMARILLOS
   ========================================================= */
#juegos .game-link img,
#juegos img{
    border:6px solid var(--rosy-border) !important;
    outline:none !important;
    background:transparent !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1050px){
    .justificacion-layout{
        grid-template-columns:1fr !important;
    }

    .justificacion-layout .tall-image img{
        height:600px !important;
    }

    .marco-side-layout .center-single-image img{
        height:520px !important;
    }

    #metodologia .activity img{
        width:min(100%,800px) !important;
    }
}

@media(max-width:720px){
    #metodologia .activity img{
        width:100% !important;
        max-height:520px !important;
    }

    .marco-side-layout .center-single-image img{
        height:420px !important;
    }

    .justificacion-layout .tall-image img{
        height:500px !important;
    }
}

/* =========================================================
   INICIO FINAL — ESTILO SUAVE COMO LA REFERENCIA
   Fondo exacto: #FBE3E3
   ========================================================= */

:root{
    --inicio-bg:#FBE3E3;
    --dark-green:#0A3323;
    --moss-green:#839958;
    --beige:#F7F4D5;
    --rosy-brown:#D3968C;
    --midnight-green:#105666;
    --rosy-border:#A9655C;
}

/* Fondo general solicitado */
html,
body,
body.pagina-natural{
    background:#FBE3E3 !important;
}

/* =========================================================
   BARRA LATERAL — como el diseño de referencia
   ========================================================= */

.top{
    display:none !important;
}

.menu{
    top:0 !important;
    height:100vh !important;
    bottom:0 !important;
    background:linear-gradient(180deg,#0A3323 0%,#105666 100%) !important;
    border-right:3px solid #839958 !important;
    padding:18px 14px !important;
}

.brand{
    background:#0A3323 !important;
    border:2px solid #839958 !important;
    border-radius:16px !important;
    padding:18px 14px 20px !important;
    margin-bottom:14px !important;
    color:#F7F4D5 !important;
    box-shadow:0 7px 0 rgba(10,51,35,.22) !important;
}

.brand b{
    color:#F7F4D5 !important;
}

.brand small{
    color:#D3968C !important;
    margin-top:6px;
}

.menu nav a{
    color:#F7F4D5 !important;
    border-radius:10px !important;
}

.menu nav a:hover{
    background:#839958 !important;
    color:#0A3323 !important;
}

/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

main{
    width:calc(100% - var(--m)) !important;
    margin-left:var(--m) !important;
    padding-top:0 !important;
    background:#FBE3E3 !important;
}

section,
section.alt{
    background:#FBE3E3 !important;
}

/* =========================================================
   INICIO — parecido al diseño que te mostré
   ========================================================= */

.hero{
    min-height:100vh !important;
    padding-top:70px !important;
    padding-bottom:70px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr) !important;
    gap:45px !important;
    align-items:center !important;
    background:#FBE3E3 !important;
}

.hero > div:first-child{
    max-width:850px;
}

.badge{
    background:#F7F4D5 !important;
    color:#0A3323 !important;
    border:2px solid #839958 !important;
    box-shadow:4px 4px 0 #0A3323 !important;
}

.hero h1{
    color:#0A3323 !important;
    text-shadow:none !important;
    font-size:clamp(3.6rem,6vw,7rem) !important;
    margin:22px 0 !important;
}

.hero h1 em{
    color:#839958 !important;
}

.hero p{
    color:#0A3323 !important;
    font-size:1.25rem !important;
    max-width:720px !important;
}

.heroimg{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}

.heroimg img{
    width:100% !important;
    height:570px !important;
    object-fit:cover !important;
    border:6px solid #A9655C !important;
    border-radius:22px !important;
    outline:none !important;
    box-shadow:0 12px 28px rgba(10,51,35,.18) !important;
}

/* Cinco reinos en tonos de la nueva paleta */
.pills{
    gap:12px !important;
    margin-top:24px !important;
}

.pills span{
    color:#0A3323 !important;
    border:2px solid #A9655C !important;
    box-shadow:3px 3px 0 rgba(10,51,35,.18) !important;
}

.pills span:nth-child(1){
    background:#D3968C !important;
}
.pills span:nth-child(2){
    background:#B8C99A !important;
}
.pills span:nth-child(3){
    background:#F7F4D5 !important;
}
.pills span:nth-child(4){
    background:#9FC1C3 !important;
}
.pills span:nth-child(5){
    background:#839958 !important;
}

/* Etiquetas de secciones */
section>label{
    color:#105666 !important;
}

/* =========================================================
   IMÁGENES — mismo marco rosado oscuro
   ========================================================= */

.heroimg img,
.section-image img,
.activity img,
.center-images img,
.center-single-image img,
.side-content-image img,
.results-fixed img,
.resultado-figura img,
#resultados img,
.results img,
.results-improved img,
.title-image,
.game-link img,
.justificacion-layout img,
.text-image-row img,
.marco-side-layout img,
figure img,
article img{
    border-color:#A9655C !important;
    outline:none !important;
}

/* =========================================================
   HIPÓTESIS
   ========================================================= */

#hipotesis .grid3 article{
    box-shadow:none !important;
    outline:none !important;
}

#hipotesis .grid3 article.g{
    background:#0A3323 !important;
    border:3px solid #6F8F76 !important;
}

#hipotesis .grid3 article.b{
    background:#839958 !important;
    border:3px solid #B8C99A !important;
}

#hipotesis .grid3 article.p{
    background:#F7F4D5 !important;
    border:3px solid #FFFFFF !important;
}

/* =========================================================
   METODOLOGÍA — grande y centrada
   ========================================================= */

#metodologia .activity{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:min(100%,1100px) !important;
    margin:25px auto 45px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

#metodologia .activity img{
    display:block !important;
    width:min(100%,950px) !important;
    max-height:680px !important;
    height:auto !important;
    object-fit:contain !important;
    margin:auto !important;
}

/* =========================================================
   MARCO REFERENCIAL — grande
   ========================================================= */

.marco-side-layout .center-single-image{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
}

.marco-side-layout .center-single-image img{
    width:min(100%,1000px) !important;
    height:620px !important;
    object-fit:contain !important;
    margin:auto !important;
}

/* =========================================================
   JUSTIFICACIÓN — imagen más larga
   ========================================================= */

.justificacion-layout{
    align-items:center !important;
    gap:38px !important;
}

.justificacion-layout .tall-image{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}

.justificacion-layout .tall-image img{
    width:100% !important;
    height:760px !important;
    object-fit:cover !important;
    margin:auto !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1050px){
    .hero{
        grid-template-columns:1fr !important;
        min-height:auto !important;
    }

    .heroimg img{
        height:500px !important;
    }

    .justificacion-layout{
        grid-template-columns:1fr !important;
    }

    .justificacion-layout .tall-image img{
        height:600px !important;
    }
}

@media(max-width:720px){
    .menu{
        width:230px !important;
    }

    main{
        width:calc(100% - 230px) !important;
        margin-left:230px !important;
    }

    .hero{
        padding:55px 25px !important;
    }

    .hero h1{
        font-size:3rem !important;
    }

    .heroimg img{
        height:360px !important;
    }

    .marco-side-layout .center-single-image img{
        height:430px !important;
    }

    .justificacion-layout .tall-image img{
        height:500px !important;
    }
}


/* =========================================================
   INICIO — TÍTULO PEQUEÑO AL LADO DE LA IMAGEN
   ========================================================= */

.hero{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(300px,42%) !important;
    align-items:center !important;
    gap:38px !important;
    min-height:500px !important;
    padding:55px 6% !important;
}

.hero .hero-content{
    text-align:left !important;
    order:1 !important;
}

.hero .hero-image,
.hero .heroimg,
.hero > .section-image{
    order:2 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}

.hero .hero-image img,
.hero .heroimg img,
.hero > .section-image img{
    width:100% !important;
    max-width:500px !important;
    height:360px !important;
    object-fit:cover !important;
    border:6px solid #A9655C !important;
    border-radius:18px !important;
    box-shadow:0 8px 22px rgba(10,51,35,.16) !important;
}

/* Título más pequeño, elegante y junto a la imagen */
.hero h1{
    font-size:clamp(28px,3.2vw,46px) !important;
    line-height:1.08 !important;
    margin:8px 0 12px !important;
    max-width:620px !important;
}

.hero h1 em{
    display:block !important;
    font-size:.62em !important;
    line-height:1.15 !important;
    margin-top:8px !important;
}

.hero p{
    max-width:570px !important;
    font-size:16px !important;
    line-height:1.55 !important;
}

/* =========================================================
   LOS 5 REINOS — ICONOS EN CÍRCULOS
   ========================================================= */

.hero .kingdoms,
.hero .reinos,
.hero .kingdom-icons,
.hero .reino-icons{
    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:14px !important;
    margin-top:24px !important;
}

.hero .kingdom,
.hero .reino,
.hero .kingdom-item,
.hero .kingdoms > div,
.hero .reinos > div{
    width:76px !important;
    height:76px !important;
    min-width:76px !important;
    border-radius:50% !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    padding:7px !important;
    background:#F7F4D5 !important;
    border:3px solid #D3968C !important;
    box-shadow:0 4px 10px rgba(10,51,35,.12) !important;
}

.hero .kingdom i,
.hero .reino i,
.hero .kingdom-item i,
.hero .kingdoms > div i,
.hero .reinos > div i{
    font-size:27px !important;
    line-height:1 !important;
    margin-bottom:4px !important;
}

.hero .kingdom span,
.hero .reino span,
.hero .kingdom-item span,
.hero .kingdoms > div span,
.hero .reinos > div span{
    color:#0A3323 !important;
    font-size:11px !important;
    font-weight:800 !important;
}

/* Si los iconos están hechos con texto/emoji, que sigan centrados */
.hero .kingdoms > *,
.hero .reinos > *{
    box-sizing:border-box !important;
}

/* En pantallas pequeñas, imagen debajo y título sigue pequeño */
@media(max-width:850px){
    .hero{
        grid-template-columns:1fr !important;
        gap:25px !important;
        text-align:center !important;
    }

    .hero .hero-content{
        text-align:center !important;
    }

    .hero p{
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .hero .kingdoms,
    .hero .reinos,
    .hero .kingdom-icons,
    .hero .reino-icons{
        justify-content:center !important;
    }

    .hero .hero-image,
    .hero .heroimg,
    .hero > .section-image{
        order:2 !important;
    }
}


/* Compatibilidad con los nombres usados en la portada */
.hero .kingdom-circle,
.hero .reino-circle,
.hero .circle{
    width:76px !important;
    height:76px !important;
    border-radius:50% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-direction:column !important;
    background:#F7F4D5 !important;
    border:3px solid #D3968C !important;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
    scroll-behavior:smooth;
}

body{
    background:#eef7ff;
    color:#333;
    line-height:1.7;
}

/*=========================
      ENCABEZADO
==========================*/

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:70px;
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 35px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    z-index:1000;
}

.logo{
    display:flex;
    align-items:center;
    text-decoration:none;
    color: #333;
    font-size:20px;
    font-weight:bold;
}

.logo img{
    width:45px;
    margin-right:12px;
}

.menu-superior{
    display:flex;
    gap:25px;
}

.menu-superior a{
    text-decoration:none;
    color: #333;
    transition:.3s;
    font-weight:500;
}

.menu-superior a:hover{
    color:#2196F3;
}





/* =========================================================
   AJUSTE SOLICITADO — SOLO BAJAR EL MENÚ LATERAL
   El menú queda debajo del encabezado superior.
   No modifica el título ni la imagen del Inicio.
   ========================================================= */

.menu {
    top: 68px !important;
    bottom: 0 !important;
    height: calc(100vh - 68px) !important;
}


/* =========================================================
   AJUSTE FINAL — BAJAR ÚNICAMENTE LA IMAGEN DEL INICIO
   No mueve el título, textos, botones ni el menú.
   ========================================================= */

@media (min-width: 1051px) {
    .hero .heroimg img {
        transform: translateY(35px) !important;
    }
}

/* =========================================================
   MENÚ DESPLEGABLE — aparece al pasar el cursor sobre "MENÚ"
   ========================================================= */
.menu-hover{position:fixed;top:88px;left:18px;z-index:1500;width:145px;}
/* Botón visible que activa el menú al señalarlo. */
.menu-trigger{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;background:var(--dark-green,#0A3323);color:var(--beige,#F7F4D5);border:3px solid var(--moss-green,#839958);border-radius:14px;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(10,51,35,.18);}
/* El menú se oculta y aparece al pasar el cursor por la zona. */
.menu-hover .menu{position:absolute !important;top:56px !important;left:0 !important;width:285px !important;max-height:calc(100vh - 110px) !important;height:auto !important;bottom:auto !important;overflow-y:auto !important;opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s ease;border-radius:0 18px 18px 18px;}
/* Al señalar el botón o el panel, se despliega la navegación. */
.menu-hover:hover .menu,.menu-hover:focus-within .menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.menu-hover:hover .menu-trigger,.menu-trigger:focus{background:var(--moss-green,#839958);color:var(--dark-green,#0A3323);}
/* El contenido ya no deja espacio reservado para un menú lateral fijo. */
body.pagina-natural main,body.pagina-natural footer{width:100% !important;margin-left:0 !important;}

/* =========================================================
   CHATBOT — ventana, mensajes, botones y campo de pregunta
   ========================================================= */
.dog-chat{position:fixed;right:25px;bottom:25px;z-index:2000;font-family:"Nunito","Segoe UI",Arial,sans-serif;}
/* Botón flotante que abre el asistente. */
.dog-chat-button{width:66px;height:66px;border-radius:50%;border:4px solid var(--dark-green,#0A3323);background:var(--beige,#F7F4D5);font-size:30px;cursor:pointer;box-shadow:0 10px 25px rgba(10,51,35,.25);}
.dog-chat-button:hover{transform:scale(1.06);}
/* Ventana cerrada por defecto; JavaScript le añade la clase open para mostrarla. */
.dog-chat-box{position:absolute;right:0;bottom:80px;width:min(370px,calc(100vw - 35px));background:#fff;border:4px solid var(--moss-green,#839958);border-radius:22px;box-shadow:0 18px 45px rgba(10,51,35,.25);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(12px) scale(.97);pointer-events:none;transition:.2s ease;}
/* Estado visible de la ventana del chatbot. */
.dog-chat-box.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;}
/* Encabezado del chatbot. */
.dog-chat-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:var(--dark-green,#0A3323) !important;color:var(--beige,#F7F4D5) !important;font-weight:900;}
/* Botón para cerrar la conversación. */
.dog-chat-head button{border:0;background:transparent;color:inherit;font-size:25px;cursor:pointer;line-height:1;}
/* Área desplazable donde aparecen los mensajes. */
.dog-chat-body{max-height:370px;overflow-y:auto;padding:15px;background:#fbfaf4;}
.chat-message{width:fit-content;max-width:88%;margin:8px 0;padding:10px 12px;border-radius:15px;line-height:1.45;font-size:14px;}
.chat-message.bot{background:var(--beige,#F7F4D5);color:var(--dark-green,#0A3323);border:1px solid var(--moss-green,#839958);}
.chat-message.user{margin-left:auto;background:var(--rosy-brown,#D3968C);color:var(--dark-green,#0A3323);}
/* Botones de preguntas rápidas. */
.dog-questions{display:grid !important;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
.dog-questions button{border:2px solid var(--moss-green,#839958);background:var(--beige,#F7F4D5);color:var(--midnight-green,#105666);border-radius:11px;padding:8px 7px;font:700 12px/1.2 "Nunito",sans-serif;cursor:pointer;}
.dog-questions button:hover{background:var(--rosy-brown,#D3968C);color:var(--dark-green,#0A3323);}
/* Formulario inferior para escribir preguntas. */
.dog-chat-input{display:flex;gap:7px;padding:10px;background:#fff;border-top:2px solid #e1e7e3;}
.dog-chat-input input{flex:1;min-width:0;border:2px solid var(--moss-green,#839958);border-radius:12px;padding:10px;outline:none;font:600 14px "Nunito",sans-serif;}
.dog-chat-input input:focus{border-color:var(--midnight-green,#105666);}
.dog-chat-input button{width:43px;border:0;border-radius:12px;background:var(--dark-green,#0A3323);color:var(--beige,#F7F4D5);font-size:19px;cursor:pointer;}
/* Adaptación del menú y chatbot para pantallas pequeñas. */
@media(max-width:720px){.menu-hover{top:68px;left:10px}.menu-hover .menu{width:min(285px,calc(100vw - 20px)) !important;max-height:70vh !important}.dog-chat{right:14px;bottom:14px}.dog-chat-box{bottom:76px}}

/* =========================================================
   MENÚ SUPERIOR DESPLEGABLE — AL LADO DE ¿QUIÉNES SOMOS?
   ========================================================= */
/* Este div sirve como contenedor del botón MENÚ y del contenido que aparece al pasar el cursor. */
.menu-superior .menu-hover{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    height:100%!important;
}

/* Este div funciona como el botón visual MENÚ dentro de la barra superior. */
.menu-superior .menu-trigger{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:8px 12px!important;
    border-radius:10px!important;
    color:var(--dark-green,#0A3323)!important;
    font-weight:900!important;
    cursor:pointer!important;
    white-space:nowrap!important;
}

/* Cuando el cursor pasa sobre MENÚ, cambia su fondo para indicar que puede abrirse. */
.menu-superior .menu-trigger:hover,
.menu-superior .menu-hover:focus-within .menu-trigger{
    background:var(--moss-green,#839958)!important;
    color:#fff!important;
}

/* Este div contiene todos los enlaces internos y queda oculto hasta pasar el cursor sobre MENÚ. */
.menu-superior .menu-dropdown{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    right:0!important;
    left:auto!important;
    width:300px!important;
    max-height:75vh!important;
    overflow-y:auto!important;
    display:block!important;
    visibility:hidden!important;
    opacity:0!important;
    transform:translateY(-8px)!important;
    pointer-events:none!important;
    padding:14px!important;
    background:var(--dark-green,#0A3323)!important;
    border:2px solid var(--moss-green,#839958)!important;
    border-radius:16px!important;
    box-shadow:0 14px 30px rgba(10,51,35,.28)!important;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important;
    z-index:99999!important;
}

/* Este estado hace visible el menú cuando el cursor está sobre MENÚ o cuando se usa con teclado. */
.menu-superior .menu-hover:hover .menu-dropdown,
.menu-superior .menu-hover:focus-within .menu-dropdown{
    visibility:visible!important;
    opacity:1!important;
    transform:translateY(0)!important;
    pointer-events:auto!important;
}

/* Este div identifica el proyecto dentro del menú desplegado. */
.menu-superior .menu-dropdown .brand{
    color:var(--beige,#F7F4D5)!important;
    padding:10px!important;
    margin-bottom:8px!important;
    border-bottom:1px solid rgba(247,244,213,.25)!important;
}

/* Este nav organiza los enlaces del menú uno debajo del otro. */
.menu-superior .menu-dropdown nav{
    display:grid!important;
    gap:4px!important;
}

/* Estos enlaces llevan a las diferentes secciones de la página. */
.menu-superior .menu-dropdown nav a{
    display:block!important;
    color:var(--beige,#F7F4D5)!important;
    padding:9px 10px!important;
    border-radius:9px!important;
    font-size:14px!important;
    font-weight:800!important;
}

/* Este estado resalta el enlace sobre el que está el cursor. */
.menu-superior .menu-dropdown nav a:hover{
    background:var(--moss-green,#839958)!important;
    color:#fff!important;
    transform:none!important;
}

/* =========================================================
   CHATBOT EXPLORADOG — FUNCIONAMIENTO REAL CON JAVASCRIPT
   ========================================================= */
/* Este div fija el perrito en una esquina para que pueda abrirse desde cualquier sección. */
.dog-chat{
    position:fixed!important;
    right:24px!important;
    bottom:24px!important;
    z-index:999999!important;
}

/* Este button es el botón que abre y cierra Exploradog. */
.dog-chat-button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:68px!important;
    height:68px!important;
    padding:0!important;
    border-radius:50%!important;
    border:3px solid var(--rosy-brown,#D3968C)!important;
    background:var(--beige,#F7F4D5)!important;
    font-size:32px!important;
    cursor:pointer!important;
}

/* Este div es la ventana del chatbot y permanece oculta hasta que JavaScript le agrega la clase open. */
.dog-chat-box{
    display:none!important;
    position:absolute!important;
    right:0!important;
    bottom:80px!important;
    width:340px!important;
    max-width:calc(100vw - 24px)!important;
    background:#fff!important;
    border:3px solid var(--moss-green,#839958)!important;
    border-radius:20px!important;
    overflow:hidden!important;
    box-shadow:0 16px 35px rgba(10,51,35,.25)!important;
}

/* Este estado muestra la ventana cuando el JavaScript detecta que el usuario abrió el chatbot. */
.dog-chat-box.open{
    display:block!important;
}

/* Este div es la cabecera donde aparece el nombre de Exploradog y el botón de cerrar. */
.dog-chat-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:13px 16px!important;
    background:var(--dark-green,#0A3323)!important;
    color:#fff!important;
    font-weight:900!important;
}

/* Este button cierra la ventana del chatbot. */
.dog-chat-head button{
    margin:0!important;
    padding:0 6px!important;
    background:transparent!important;
    color:#fff!important;
    border:0!important;
    font-size:25px!important;
    cursor:pointer!important;
}

/* Este div contiene el historial de mensajes y permite desplazarse cuando hay muchas preguntas. */
.dog-chat-body{
    max-height:360px!important;
    overflow-y:auto!important;
    padding:15px!important;
    background:#fff!important;
    color:var(--dark-green,#0A3323)!important;
}

/* Este div representa cada mensaje enviado por el usuario o por Exploradog. */
.chat-message{
    margin:0 0 10px!important;
    padding:9px 11px!important;
    border-radius:12px!important;
    line-height:1.45!important;
}

/* Este estado diferencia visualmente las respuestas del chatbot. */
.chat-message.bot{
    background:var(--beige,#F7F4D5)!important;
    color:var(--dark-green,#0A3323)!important;
}

/* Este estado diferencia visualmente las preguntas escritas por el usuario. */
.chat-message.user{
    background:var(--moss-green,#839958)!important;
    color:#fff!important;
    margin-left:24px!important;
}

/* Este div contiene las preguntas rápidas que el estudiante puede pulsar. */
.dog-chat-body .dog-questions{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    margin-top:10px!important;
}

/* Estos botones envían una pregunta predeterminada al chatbot. */
.dog-chat-body .dog-questions button{
    width:100%!important;
    padding:8px 10px!important;
    border:1px solid rgba(131,153,88,.5)!important;
    border-radius:10px!important;
    background:#f7f4d5!important;
    color:#0A3323!important;
    text-align:left!important;
    font-weight:800!important;
    cursor:pointer!important;
}

/* Este estado indica que una pregunta rápida puede seleccionarse. */
.dog-chat-body .dog-questions button:hover{
    background:#839958!important;
    color:#fff!important;
}

/* Este form contiene el campo donde el estudiante escribe su propia pregunta y el botón de enviar. */
.dog-chat-input{
    display:flex!important;
    gap:7px!important;
    padding:10px!important;
    border-top:1px solid #dfe7dc!important;
    background:#fff!important;
}

/* Este input permite escribir preguntas sobre animales y reinos. */
.dog-chat-input input{
    min-width:0!important;
    flex:1!important;
    padding:10px!important;
    border:1px solid #b8c99a!important;
    border-radius:10px!important;
    outline:none!important;
}

/* Este button envía la pregunta escrita al chatbot. */
.dog-chat-input button{
    width:44px!important;
    border:0!important;
    border-radius:10px!important;
    background:var(--dark-green,#0A3323)!important;
    color:#fff!important;
    cursor:pointer!important;
}

@media(max-width:700px){
    /* En pantallas pequeñas el menú se adapta al ancho disponible. */
    .menu-superior .menu-dropdown{
        right:0!important;
        width:min(300px,calc(100vw - 24px))!important;
    }
    /* En pantallas pequeñas el chatbot se acerca al borde para dejar espacio al contenido. */
    .dog-chat{
        right:12px!important;
        bottom:12px!important;
    }
}


/* =========================================================
   AJUSTE FINAL — MENÚ EN LA BARRA SUPERIOR
   ========================================================= */
/* Este nav contiene Galería, Proyectos, Contactos, ¿Quiénes Somos? y MENÚ en una sola barra. */
.top .menu-superior,
header .menu-superior{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    margin:0!important;
    padding:0!important;
}

/* Este div mantiene MENÚ dentro de la misma línea que los demás enlaces. */
.top .menu-superior .menu-hover,
header .menu-superior .menu-hover{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    height:auto!important;
    margin:0!important;
}

/* Este div funciona como la palabra MENÚ y usa un verde suave. */
.top .menu-superior .menu-trigger,
header .menu-superior .menu-trigger{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:7px 12px!important;
    border-radius:10px!important;
    color:#5f765f!important;
    background:transparent!important;
    font-weight:900!important;
    white-space:nowrap!important;
    cursor:pointer!important;
}

/* Este estado resalta MENÚ con un verde suave al pasar el cursor. */
.top .menu-superior .menu-trigger:hover,
.top .menu-superior .menu-hover:focus-within .menu-trigger,
header .menu-superior .menu-trigger:hover,
header .menu-superior .menu-hover:focus-within .menu-trigger{
    background:#dfe8d5!important;
    color:#4f684f!important;
}

/* Este div despliega las opciones debajo de la barra, pero MENÚ permanece dentro de la barra superior. */
.top .menu-superior .menu-dropdown,
header .menu-superior .menu-dropdown{
    top:calc(100% + 8px)!important;
    right:0!important;
    left:auto!important;
    background:#eef3e9!important;
    border:2px solid #b8c99a!important;
    box-shadow:0 12px 28px rgba(10,51,35,.18)!important;
}

/* Estos enlaces usan tonos suaves para mantener la apariencia natural del proyecto. */
.top .menu-superior .menu-dropdown nav a,
header .menu-superior .menu-dropdown nav a{
    color:#38533f!important;
}

/* Este estado marca cada opción cuando el cursor pasa sobre ella. */
.top .menu-superior .menu-dropdown nav a:hover,
header .menu-superior .menu-dropdown nav a:hover{
    background:#dfe8d5!important;
    color:#294532!important;
}

/* En pantallas pequeñas, la barra puede ocupar varias líneas sin sacar MENÚ de la barra. */
@media(max-width:800px){
    .top{
        height:auto!important;
        min-height:68px!important;
        padding:8px 14px!important;
        flex-wrap:wrap!important;
        gap:6px!important;
    }
    .top .menu-superior,
header .menu-superior{
        flex-wrap:wrap!important;
        justify-content:flex-end!important;
    }
}


/* =========================================================
   GUÍA RÁPIDA DE PROPIEDADES CSS
   selector = indica qué elemento HTML queremos modificar.
   color = cambia el color del texto.
   background/background-color = cambia el fondo.
   margin = crea espacio por fuera del elemento.
   padding = crea espacio por dentro del elemento.
   display:flex = organiza elementos de forma flexible, normalmente en fila.
   gap = crea espacio entre los elementos de un grupo.
   position = define cómo se ubica un elemento en la página.
   top/right/bottom/left = indican desplazamientos desde los bordes.
   width/height = controlan el ancho y el alto.
   font-size = cambia el tamaño de la letra.
   font-weight = cambia el grosor de la letra.
   border = crea un borde alrededor del elemento.
   border-radius = redondea las esquinas.
   box-shadow = agrega una sombra.
   cursor:pointer = cambia el cursor para indicar que se puede hacer clic.
   :hover = aplica estilos cuando el cursor pasa sobre un elemento.
   @media = permite adaptar los estilos a diferentes tamaños de pantalla.
   !important = hace que esa regla tenga prioridad sobre otras reglas.
   ========================================================= */

/* Este header es la barra superior que contiene el logo y los enlaces. */
header{
    gap:0!important;
}

/* Este logo agrupa la imagen del colegio y su nombre. */
header .logo{
    flex-shrink:0!important;
}

/* Este nav contiene los enlaces y queda separado visualmente del logo. */
header .menu-superior{
    margin-left:45px!important;
    gap:10px!important;
}

/* Este div separa todavía un poco más la palabra MENÚ del enlace anterior. */
header .menu-superior .menu-hover{
    margin-left:14px!important;
    padding-left:10px!important;
    border-left:2px solid #dfe8d5!important;
}

/* Esta es la palabra MENÚ: permanece en la barra superior y usa un verde suave. */
header .menu-superior .menu-trigger{
    color:#5f765f!important;
    background:#f3f6ef!important;
    padding:7px 14px!important;
}

/* Al pasar el cursor, MENÚ se resalta con un verde suave. */
header .menu-superior .menu-trigger:hover,
header .menu-superior .menu-hover:focus-within .menu-trigger{
    background:#dfe8d5!important;
    color:#4f684f!important;
}

/* En pantallas pequeñas reducimos la separación para que el encabezado tenga espacio. */
@media(max-width:800px){
    header{
        padding:8px 14px!important;
        height:auto!important;
        min-height:70px!important;
        flex-wrap:wrap!important;
    }

    header .menu-superior{
        margin-left:15px!important;
        gap:4px!important;
    }

    header .menu-superior .menu-hover{
        margin-left:5px!important;
        padding-left:5px!important;
    }
}